<template>
  <div class="ExportButton">
    <!-- 任务分配底部组件 -->
    <div class="button-container" style="padding-top:0">
      <Button type="primary" :loading="loading" @click="average">平均分配</Button>
      <Button type="primary" @click="manualDailog">手动分配</Button>
      <i style="flex-grow:1"></i>
      <Button type="primary" @click="createSuccess">{{ pageType===1?'修改完成':'创建完成' }}</Button>
    </div>
    <el-dialog title="任务分配" :visible.sync="dialogVisible" :close-on-click-modal="false">
      <FormContainer :column="2">
        <el-form
          ref="form"
          :model="formData"
          :rules="formRules"
          :show-close="false"
          label-width="80px"
        >
          <el-form-item prop="customerService" label="坐席姓名" :span="18">
            <el-select v-model="formData.customerService" clearable filterable @change="changePeopel">
              <el-option v-for="(option,index) in userList" :key="index" :label="`${option.staffName}(${option.accountNo})`" :value="option.accountNo" />
            </el-select>
          </el-form-item>
          <el-form-item :span="6">
            <Button type="primary" @click="manualConfrim">确定</Button>
          </el-form-item>
        </el-form>
      </FormContainer>
    </el-dialog>
  </div>
</template>
<script>
import FormContainer from '@/components/FormContainer'
import Button from '@/components/Button'
import { mapState } from 'vuex'
import { callBackTaskAllocation, callBackTaskGetStaffInfo } from '@/api/callBackTask'
export default {
  name: 'ManualTemplate',
  components: {
    FormContainer,
    Button
  },
  props: {
    list: {
      type: Array,
      default: () => {
        return []
      }
    },
    objectMethod: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      dialogVisible: false,
      addSuccess: false,
      loading: false,
      userList: [],
      pageType: 0,
      formData: { customerService: '' },
      formRules: {
        customerService: { required: true, message: '请选择坐席', trigger: 'change' }
      }
    }
  },
  computed: {
    ...mapState({
      taskId: function(state) {
        return state.taskForm.form[this.$route.query.id] ? state.taskForm.form[this.$route.query.id].basic.id : ''
      }
    })
  },
  mounted() {
    if (this.$route.query.id) {
      this.pageType = 1
    }
    if (this.taskId) {
      callBackTaskGetStaffInfo(this.taskId).then(res => {
        if (res.success === 1) {
          this.userList = res.data
        }
      })
    }
  },
  methods: {
    closeDailog() {
      this.$refs.form.resetFields()
      this.dialogVisible = false
    },
    changePeopel(val) {
      for (const i of this.userList) {
        if (i.accountNo === val) {
          this.curPeopel = i.staffName
          break
        }
      }
    },
    // 平均分配
    average() {
      if (this.list.length === 0) {
        return this.$message.info('请至少选择一条数据')
      }
      const list = []
      this.list.forEach(e => {
        list.push({
          taskId: this.taskId,
          id: e.id
        })
      })
      const reqData = {
        allocationType: 1,
        userList: this.userList,
        objectMethod: this.objectMethod
      }
      if (this.objectMethod === 0) {
        reqData.callBackObjectImportDTOList = list
      }
      if (this.objectMethod === 1) {
        reqData.callBackObjectOnlineDTOList = list
      }
      if (this.objectMethod === 2) {
        reqData.callBackObjectOfflineDTOList = list
      }
      this.loading = true
      callBackTaskAllocation(reqData).then(res => {
        if (res.success === 1) {
          this.$message({
            message: '分配成功!',
            type: 'success'
          })
          this.$emit('refresh')
          this.loading = false
          this.addSuccess = true
        }
      }).catch(er => {
        this.loading = false
      })
    },
    manualDailog() {
      if (this.list.length === 0) {
        return this.$message.info('请至少选择一条数据')
      }
      this.dialogVisible = true
    },
    // 手动分配弹窗确定
    manualConfrim() {
      return this.$refs.form.validate().then(() => {
        const list = []
        this.list.forEach(e => {
          list.push({
            customerService: this.formData.customerService,
            customerServiceName: this.curPeopel,
            taskId: this.taskId,
            id: e.id
          })
        })
        const reqData = {
          allocationType: 2,
          objectMethod: this.objectMethod
        }
        if (this.objectMethod === 0) {
          reqData.callBackObjectImportDTOList = list
        }
        if (this.objectMethod === 1) {
          reqData.callBackObjectOnlineDTOList = list
        }
        if (this.objectMethod === 2) {
          reqData.callBackObjectOfflineDTOList = list
        }
        return callBackTaskAllocation(reqData).then(res => {
          if (res.success === 1) {
            this.$message({
              message: '分配成功!',
              type: 'success'
            })
            this.$emit('refresh')
            this.addSuccess = true
            this.closeDailog()
            this.loading = false
          }
        })
      })
    },
    createSuccess() {
      if (!this.addSuccess) {
        return this.$message.info('请先分配坐席')
      }
      this.$store.commit('taskForm/SET_RESET', this.$route.query.id)
      this.$closePage()
    }
  }
}
</script>
<style lang='scss' scoped>
</style>
